<template>
    <div class="a-popvoer" ref="popover">
        <div 
            class="popover-wrapper"
            ref="popoverWrapper"
            :class="{[`position-${position}`]:true}"
            v-if="visible"
        >
            <slot name="content"></slot>
            <div v-show="confirm" style="margin-top: 10px; float: right;">
                <a-button type="primary" btnMsg="取消" @handleClick="close"></a-button>
                <a-button type="primary" btnMsg="确定" @handleClick="close"></a-button>
            </div>
        </div>
        <span
            class="trigger-wrapper"
            style="display: inline-block;"
        >
            <slot></slot>
        </span>

    </div>
</template>

<script>
export default {
    name: 'a-popover',
    props: {
        confirm: {
            type: Boolean,
            default: false
        },
        position: {
            type: String,
            default: 'top',
            validator(value) {
                return ['top','bottom','left','right'].indexOf(value)>=0
            }
        },
        trigger: {
            type: String,
            default: 'click',
            validator(value) {
                return ['click','hover'].indexOf(value)>=0
            }
        }
    },
    methods: {
        close(e) {
            this.$emit('close',e)
        }
    }
}
</script>